<script setup lang="ts">
import {
  ref,
  onMounted,
  getCurrentInstance,
} from 'vue'
import {useRouter, useRoute} from "vue-router";
import {Back} from '@element-plus/icons-vue'

const global = getCurrentInstance().appContext.config.globalProperties;

// useRoute: 取路由参数
// useRouter: 1.编程式路由跳转，2.还有<router-link>方式

const router = useRouter();
const route = useRoute(); //路由参数(query/params) 包含在 route 对象中
const {query} = useRoute();

//演出信息
// 存储所有演出信息（改为数组，因为要存多个结果）
const performances = ref<Array<{
  pid: number;
  pname: string;
  rurl: string;
  pdetail: string;
  pprice: string;
  ptime: string;
  plocation: string;
}>>([]);

//定义数组，用于存放id,这几个id里面存放着推荐部分的图片
const idArray = Array.of(2, 3, 4, 5, 9, 10);

// 封装请求函数：接收单个 ID 参数
const getPerformance = (id: number) => {
  //访问后端
  // 关键修复：用反引号（`）代替单引号（'），才能解析${query.id}!!!!!!
  global.$http.get(`/public/maoyanmovieproject/queryPerformanceById/${id}`)
      .then(resp => {
        console.log(resp.data);
        performances.value.push(resp.data); // 存入数组，如果直接用performances.value = [resp.data] 会覆盖数组，导致最终仅保留最后一次请求的结果
      }).catch(err => {
    console.error('获取演出信息失败:', err);
    // 可以添加错误提示
  })
}

//编程式路由跳转
const testRouter = () => {
  router.go(-1) // history.back(), history.forward(), history.go(-1|1)
}


// 组件挂载后，遍历数组发起请求
onMounted(() => {
  idArray.forEach(id => {
    getPerformance(id); // 逐个传入 ID
  });
});

</script>

<template>
  <div class="box">
  <div class="recommend-text"><h2>  为你推荐</h2></div>
  <div class="performance-detail">

    <el-row gutter="20">
      <el-col :span="12" v-for="item in performances" :key="item.pid">
        <div class="detail-content">
          <div>
            <h3>{{ item.pname }}</h3>
            <router-link :to="{name:'performance-detail',query:{id:item.pid}}">
              <el-image
                  :src="item.rurl"
                  fit="contain"
                  class="performance-image"
              >
              </el-image>
            </router-link>
          </div>

          <div class="performance-info">
            <p><strong>价格：</strong>{{ item.pprice }}</p>
            <p><strong>时间：</strong>{{ item.ptime }}</p>
            <p><strong>地点：</strong>{{ item.plocation }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<style scoped>
/*设置推荐这部分的背景颜色*/
.box{
  background: #f2f2f2;
}

.performance-image {
  /* 核心：保持原始比例缩放，且不超过自身原始尺寸 */
  max-width: 100%; /* 不超过容器宽度 */
  max-height: 100%; /* 不超过容器高度 */
  width: auto; /* 宽度随高度等比自适应 */
  height: auto; /* 高度随宽度等比自适应 */
  /* 保留原有装饰样式 */
  border-radius: 8px;
  margin: 20px 0;
}

.performance-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.detail-content {
  text-align: center;
  /* 垂直方向间隔（行与行之间的距离） */
  margin-bottom: 30px;
  /* 可选：添加背景和阴影增强分隔感 */
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.performance-info {
  text-align: left;
  margin-top: 20px;
}

.performance-info p {
  margin: 10px 0;
  line-height: 1.6;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.recommend-text {
  padding-left: 20px;
}
</style>

